<template>
  <div class="pet-rescue-container bg-white p-6 rounded-lg shadow-lg max-w-4xl mx-auto my-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">宠物流浪救助</h1>
    
    <div class="rescue-content space-y-8">
      <!-- 救助引言 -->
      <div class="intro-section bg-blue-50 rounded-xl p-6 shadow-md border-2 border-blue-100">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
            <i class="fa fa-paw text-xl"></i>
          </div>
          <h2 class="text-xl font-bold text-blue-700">让每一个生命都被温柔以待</h2>
        </div>
        <p class="text-gray-700 leading-relaxed">
          流浪宠物问题是一个需要社会共同关注的议题。每一只流浪的小猫小狗都渴望一个温暖的家。
          宠多多科技有限公司致力于帮助流浪宠物找到新家，同时为爱心人士提供救助支持和资源对接。
        </p>
      </div>

      <!-- 救助站地图 -->
      <div class="map-section">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fa fa-map-marker text-red-500 mr-2"></i> 附近流浪救助站
        </h2>
        <div class="bg-gray-100 rounded-lg p-4 relative h-80 flex items-center justify-center">
          <div class="absolute inset-0 bg-blue-500/10 rounded-lg"></div>
          <img src="../asserts/images/tp.png" alt="流浪救助站地图" class="w-full h-full object-cover rounded-lg">
        </div>
      </div>

      <!-- 救助案例 -->
      <div class="cases-section">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fa fa-heart text-red-500 mr-2"></i> 救助成功案例
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <!-- 案例1 -->
          <div class="case-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="relative h-48">
              <img src="../asserts/images/xg.png" alt="救助案例" class="w-full h-full object-contain">
              <div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">已领养</div>
            </div>
            <div class="p-4">
              <h3 class="font-bold text-gray-800 mb-2">小白的重生</h3>
              <p class="text-gray-600 text-sm mb-3">
                被发现时小黑腿部受伤，经过救助站的精心照料和治疗，现已完全康复并找到了温暖的新家。
              </p>
              <div class="flex items-center justify-between text-xs text-gray-500">
                <span>救助时间：2023年10月</span>
                <span>领养时间：2023年12月</span>
              </div>
            </div>
          </div>
          
          <!-- 案例2 -->
          <div class="case-card bg-white rounded-lg shadow-md overflow-hidden border border-gray-200 hover:shadow-lg transition-shadow">
            <div class="relative h-48">
              <img src="../asserts/images/xh.png" alt="救助案例" class="w-full h-full object-contain">
              <div class="absolute top-2 right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">已领养</div>
            </div>
            <div class="p-4">
              <h3 class="font-bold text-gray-800 mb-2">小黄的幸福生活</h3>
              <p class="text-gray-600 text-sm mb-3">
                小花是一只被遗弃的怀孕母猫，在救助站生下了四只可爱的小猫，现在它们都找到了爱它们的家庭。
              </p>
              <div class="flex items-center justify-between text-xs text-gray-500">
                <span>救助时间：2023年8月</span>
                <span>领养时间：2023年11月</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 救助服务 -->
      <div class="services-section">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fa fa-handshake-o text-green-500 mr-2"></i> 我们的救助服务
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="service-card bg-green-50 rounded-lg p-4">
            <h3 class="text-green-700 font-semibold mb-2">紧急救助</h3>
            <p class="text-gray-700 text-sm">为受伤、生病或处于危险中的流浪宠物提供紧急救助和医疗支持。</p>
          </div>
          <div class="service-card bg-yellow-50 rounded-lg p-4">
            <h3 class="text-yellow-700 font-semibold mb-2">领养对接</h3>
            <p class="text-gray-700 text-sm">为流浪宠物寻找合适的领养家庭，进行领养前审核和后续跟踪。</p>
          </div>
          <div class="service-card bg-purple-50 rounded-lg p-4">
            <h3 class="text-purple-700 font-semibold mb-2">绝育计划</h3>
            <p class="text-gray-700 text-sm">开展流浪宠物绝育项目，控制流浪动物数量，减少疾病传播。</p>
          </div>
        </div>
      </div>

      <!-- 如何参与 -->
      <div class="participate-section bg-orange-50 rounded-xl p-6 shadow-md border-2 border-orange-100">
        <h2 class="text-xl font-bold text-orange-700 mb-4">如何参与流浪救助</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="participate-item flex">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-200 flex items-center justify-center text-orange-700 mr-3">
              <i class="fa fa-home text-lg"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">领养代替购买</h3>
              <p class="text-gray-600 text-sm">考虑领养一只流浪宠物，给它们一个温暖的家。</p>
            </div>
          </div>
          <div class="participate-item flex">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-200 flex items-center justify-center text-orange-700 mr-3">
              <i class="fa fa-money text-lg"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">爱心捐赠</h3>
              <p class="text-gray-600 text-sm">捐赠食物、毯子、医疗用品或资金支持救助工作。</p>
            </div>
          </div>
          <div class="participate-item flex">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-200 flex items-center justify-center text-orange-700 mr-3">
              <i class="fa fa-calendar text-lg"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">志愿者服务</h3>
              <p class="text-gray-600 text-sm">成为志愿者，参与救助站的日常工作或领养活动。</p>
            </div>
          </div>
          <div class="participate-item flex">
            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-orange-200 flex items-center justify-center text-orange-700 mr-3">
              <i class="fa fa-bullhorn text-lg"></i>
            </div>
            <div>
              <h3 class="font-semibold text-gray-800 mb-1">宣传倡导</h3>
              <p class="text-gray-600 text-sm">宣传正确的养宠观念，倡导负责任的养宠行为。</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 救助站联系方式 -->
      <div class="contact-section">
        <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
          <i class="fa fa-phone text-blue-500 mr-2"></i> 救助站联系信息
        </h2>
        <div class="bg-white rounded-lg shadow-md border border-gray-200 p-4">
          <div class="flex flex-col md:flex-row md:items-center justify-between">
            <div class="mb-4 md:mb-0">
              <h3 class="font-bold text-gray-800">重庆宠多多流浪救助站</h3>
              <p class="text-gray-600 text-sm mt-1">重庆市高新区科园四路28号</p>
            </div>
            <div class="flex space-x-4">
              <!-- 按钮已移除 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <button class="mt-8 px-6 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors" @click="goBack">
      返回
    </button>
  </div>
</template>

<script>
export default {
  name: 'PetRescue',
  methods: {
    goBack() {
      window.history.back();
    }
  }
}
</script>

<style scoped>
.pet-rescue-container {
  line-height: 1.6;
}

h1 {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

h2 {
  color: #3b82f6;
}

button {
  cursor: pointer;
}

@media (max-width: 640px) {
  .pet-rescue-container {
    margin: 1rem;
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .case-card {
    margin-bottom: 1rem;
  }
}
</style>